<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import { getDepartmentApi } from '@/apis/consult'
  import type { DepartData, DepartItem } from '@/types/consult'
  import { computed, ref } from 'vue'

  // 1. 接收参数
  const props = defineProps<{
    type: string
    illnessType: string
  }>()

  // 2. 调接口获取科室列表
  const departmentList = ref<DepartData[]>([] as DepartData[])
  const getDepartmentList = async () => {
    const res = await getDepartmentApi()
    console.log(res)
    departmentList.value = res
  }
  getDepartmentList()

  // 3. 监听点击 - 高亮切换
  const activeIndex = ref(0)
  const activeChage = (index: number) => {
    activeIndex.value = index
  }

  // 4. 获取右侧列表
  const children = computed(() => {
    return departmentList.value[activeIndex.value]?.child
  })

  // 5. 携带id跳转至问诊页面
  const url = `/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=`
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(item, index) in departmentList"
        :key="item.id"
        class="department-item"
        :class="{ active: activeIndex === index }"
        @click="activeChage(index)"
        >{{ item.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        :url="url + item.id"
        class="department-item"
        v-for="(item, index) in children"
        :key="item.id"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
